<template>
	<div class="market_act_list" @click="showList=false">		
		<div class="content">
			<h2>市场活动推广活动报名</h2>
			<div class="selects">
				<h5>请选择推广平台</h5>
				<div class="sel_infos" @click.stop="selP">
					<img :class="{rotates:showList}" src="../../assets/images/marketAct/selDown.png" alt="" />
					<p>{{ selName }}</p>					
					<transition name="fade">
						<div v-if="showList" class="platform_lists">
							<div class="platform_list" :class="{sel:storeIndex===index}" v-for="(items,index) in allData" :key="index" @click.stop="selStore(index,items.catname)">{{ items.catname }}</div>
						</div>
					</transition>					
				</div>
			</div>
			<div class="data_lists">
				<div class="data_list" v-if="platData.length>0" v-for="(item,index) in platData" :key="index">
					<img :src="item.face_path" alt="" />
					<h2>{{ item.sitename }}</h2>
					<p v-html="item.excerpt"></p>
					<span @click="goDetail(item.ad_doc_id)">平台详情</span>
					<button @click="goPromote(item)">选择在此推广</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam } from '@/assets/js/getUrlParam'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'market_act_list',
		data() {
			return {
				showList: false,
				storeIndex: 0,
				selName: '',
				allData: []
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {
			platData(){
				if(this.allData.length > 0 && this.allData[this.storeIndex].data){
					return this.allData[this.storeIndex].data;
				}else{
					return [];
				}
			}
		},
		created() {

		},
		mounted(){
			this.getStore();
		},
		methods: {
			getStore(){
				this.$vux.loading.show();
				let obj = {};				
				obj.token = getUrlParam('token') || '';
				obj.uid = getUrlParam('uid') || '';
				this.$axiosGet('/platform/service/showstore.json',obj,true).then(res => {
					if(res.code === 200){
						this.$vux.loading.hide();
						this.selName = res.data[0].catname;
						this.allData = res.data;
					}
				})
			},
			selP(){
				this.showList = !this.showList;
			},
			selStore(id,name){
				this.storeIndex = id;
				this.selName = name;
				this.showList = false;
			},
			goDetail(id){
				this.$router.push('/marketActDetail/'+id)
			},
			goPromote(obj){
				this.$router.push('/marketActPromote');
				localStorage.setItem('promoteInfo',JSON.stringify(obj));
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">	
	.market_act_list {
		min-height: 100%;
		background: #fff;
		padding-bottom: 2rem;
		.content {
			>h2{
				text-align: left;
				padding: .7rem 0 .2rem .45rem;
				font-size: .4rem;
				color: #000;
				font-weight: 400;
			}
			.selects{
				display: flex;
				justify-content: space-between;
				padding: 0 .1rem 0 .45rem;
				>h5{
					font-size: .32rem;
					color: #9e9e9e;
					font-weight: 400;
				}
				.sel_infos{
					display: flex;
					align-items: center;
					padding: 0 .12rem;
					width: 2.88rem;
					height: .54rem;
					background: #f3f3f3;
					border-radius: .05rem;
					position: relative;
					img{
						width: .2rem;
						height: .1rem;
						margin-right: .1rem;
					}
					.rotates{
						transform: rotate(180deg);
					}
					p{
						font-size: .28rem;
						color: #1a1a1a;
					}
					.platform_lists{
						position: absolute;
						top: .65rem;
						left: 0rem;						
						width: 100%;						
						text-align: left;						
						border: 1px solid #d1d1d1;
						background: #fff;
						z-index: 99;
						.platform_list{
							font-size: .28rem;
							color: #1a1a1a;
							white-space: nowrap;							
							padding: .15rem .4rem;
						}
						.sel{
							background: #f3f3f3;
							color: red;
						}
					}
				}
			}
			.data_lists{
				display: flex;
				flex-wrap: wrap;
				margin-top: .45rem;				
				.data_list{
					width: 50%;
					height: 5rem;					
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: -1px;/* 把重合的1px干掉了，经典！ */
					img{
						width: 1.16rem;		
						height: 1.16rem;
						margin: .35rem 0 .22rem 0;				
					}
					h2{
						font-size: .32rem;
						color: #000;
						font-weight: 400;
					}
					p{
						height: 1rem;
						font-size: .22rem;
						color: #494949;
						margin: .2rem 0 .1rem 0;
						padding: 0 .2rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
					span{
						font-size: .25rem;
						color: #1d8ae5;
					}
					button{
						width: 1.92rem;
						height: .54rem;
						line-height: .54rem;
						background: #fff;
						border: 1px solid #5faf2c;
						border-radius: .05rem;
						font-size: .24rem;
						color: #5faf2c;
						margin-top: .25rem;
					}
				}		
				.data_list:nth-of-type(odd){
					border: 1px solid #d1d1d1;
				}
				.data_list:nth-of-type(even){
					border-top: 1px solid #d1d1d1;
					border-bottom: 1px solid #d1d1d1;
				}		
			}			
		}
	}
</style>